<%= render_component_tag tag_name,
  id: id,
  href: href,
  class: [
    "block px-2 py-1.5 text-xs rounded-md bg-lookbook-button-bg text-lookbook-button-text w-full transition focus:outline-none focus-visible:outline-none",
    {
      "hover:bg-lookbook-button-bg-hover": !disabled,
      "cursor-[not-allowed] opacity-50": disabled
    }
  ],
  disabled: disabled,
  aria: { label: tooltip } do %>

  <span class="flex items-center space-x-2 justify-center">
    <span x-ref="icon">
      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
    </span>
    <% if content %>
      <span><%= content %></span>
    <% end %>
  </span>

  <% if tooltip %>
    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
  <% end %>
<% end %>
